<template>
  <div class="tabbar">
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/index">
        <!-- slot-scope判断是否被选中 -->
        <van-icon
          slot="icon"
          slot-scope="props"
          :name="props.active ? icon.home_active : icon.home_normal"
        ></van-icon>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/share">
        <!-- slot-scope判断是否被选中 -->
        <van-icon
          slot="icon"
          slot-scope="props"
          :name="props.active ? icon.shop_active : icon.shop_normal"
        ></van-icon>
        <span>分享记录</span>
      </van-tabbar-item>
      <van-tabbar-item to="/addRecruitment" v-if="show==1">
        <div class="submit">
          <p>+</p>
        </div>
      </van-tabbar-item>
      <van-tabbar-item to="/addAticle" v-else-if="show==2">
        <div class="submit">
          <p>+</p>
        </div>
      </van-tabbar-item>
      <van-tabbar-item to="/addPoster" v-else-if="show==3">
        <div class="submit">
          <p>+</p>
        </div>
      </van-tabbar-item>
      <van-tabbar-item to="/addVideo" v-else-if="show==4">
        <div class="submit">
          <p>+</p>
        </div>
      </van-tabbar-item>
      <van-tabbar-item to="/marketing" v-else-if="show==0">
        <div class="submit">
          <p>+</p>
        </div>
      </van-tabbar-item>
      <van-tabbar-item to="/customer">
        <!-- slot-scope判断是否被选中 -->
        <van-icon
          slot="icon"
          slot-scope="props"
          :name="props.active ? icon.customer_active : icon.customer_normal"
        ></van-icon>
        <span>客户管理</span>
      </van-tabbar-item>
      <van-tabbar-item to="/mine">
        <!-- slot-scope判断是否被选中 -->
        <van-icon
          slot="icon"
          slot-scope="props"
          :name="props.active ? icon.mine_active : icon.mine_normal"
        ></van-icon>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "FootBar",
  props:["show"],
  data() {
    return {
      active: 0,
      icon: {
        home_active: require("../assets/tabBar/index_x.png"),
        home_normal: require("../assets/tabBar/index_m.png"),
        shop_active: require("../assets/tabBar/share_x.png"),
        shop_normal: require("../assets/tabBar/share_m.png"),
        mine_active: require("../assets/tabBar/mine_x.png"),
        mine_normal: require("../assets/tabBar/mine_m.png"),
        customer_active: require("../assets/tabBar/customer_x.png"),
        customer_normal: require("../assets/tabBar/customer_m.png"),
      },
    };
  },
  watch: {},
  mounted() {
  },
  methods: {},
};
</script>

<style scoped lang="less">
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
}
.van-icon__image {
  width: 25px;
  height: 25px;
}
.van-tabbar-item__text {
  font-size: 20px;
}
.van-tabbar-item--active {
  color: #0264d1;
}
.submit {
  background-color: #fff;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  padding: 5px;
  margin-top: -30px;
  position: relative;
  z-index: 999;
  p {
    position: relative;
    display: block;
    width: 37px;
    height: 37px;
    background-color: #0264d1;
    border-radius: 50%;
    text-align: center;
    line-height: 37px;
    font-size: 20px;
    color: #fff;
    z-index: 1;
  }
}
</style>
